<template>
  <div class="shopListContainer">
    <Header :title="'网易严选'"></Header>

    <div class="nav">
      <van-tabs @click="onClick" class="navHeader">
        <van-tab
          v-model="active"
          v-for="(c1, index) in goodsList.categoryL2List"
          :key="c1.id"
          :name="c1.id"
          class="navTitle"
          :title="c1.name"
        >
          <div class="navBar">
            <div class="navBox">{{ navBox.name }}</div>

            <div class="navList">
              <div
                class="navItem"
                @click="$router.push('/detail')"
                v-for="(c2, index) in navList"
                :key="c2.id"
              >
                <img class="navImg" :src="c2.listPicUrl" alt="" />
                <div class="navName">
                  <img :src="c2.promLogo.logoUrl" alt="" />
                  {{ c2.name }}
                </div>
                <div class="price">
                  <span class="handPrice">到手价</span>
                  <span class="handPrice">¥</span>
                  <span class="onHandPrice">{{ c2.retailPrice }}</span>
                  <span class="originalPrice">¥{{ c2.counterPrice }}</span>
                </div>
                <div class="discount">
                  <div class="count">
                    <span class="counted">限时优惠</span>
                  </div>
                  <div class="left">仅剩4小时</div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'GoodsList',
  data() {
    return {
      currentIndex: '',
      currentIndex2: '',
      active: 0,
    };
  },
  mounted() {
    const { currentIndex, currentIndex2 } = this.$route.query;
    // console.log(currentIndex, currentIndex2);
    this.currentIndex = currentIndex;
    let obj = {
      currentIndex,
      currentIndex2,
    };
    this.getshopList(obj);
  },
  methods: {
    getshopList(obj) {
      this.$store.dispatch('getshopList', obj);
    },

    onClick(name, title) {
      let obj = {
        currentIndex: this.currentIndex,
        currentIndex2: name,
      };
      this.getshopList(obj);
    },
  },
  computed: {
    ...mapState({
      goodsList: state => state.shopList.shopList,
    }),
    //计算navBox
    navBox() {
      return this.goodsList.categoryL1 || {};
    },
    //计算二级分类
    navList() {
      return (this.goodsList.categoryItems || [] || {}).itemList || {};
    },
  },
};
</script>

<style lang="less" scoped>
.shopListContainer {
  background-color: #efeeee;
  padding-bottom: 50px;
  .nav {
    margin-top: 46px;
    .navHeader {
      .navBar {
        background-color: #fff;
        .navBox {
          width: 100%;
          height: 55px;
          font-size: 14px;
          color: #333;
          text-align: center;
          line-height: 55px;
        }
        .navList {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          .navItem {
            width: 172px;
            .navImg {
              height: 172px;
              border-radius: 10px;
            }
            .navName {
              display: flex;
              font-size: 15px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              img {
                width: 44px;
                height: 17px;
                margin-right: 5px;
              }
            }
            .price {
              height: 30px;
              line-height: 30px;
              .handPrice {
                font-size: 12px;
                color: red;
              }
              .onHandPrice {
                font-size: 20px;
                color: red;
              }
              .originalPrice {
                font-size: 12px;
                color: silver;
                text-decoration: line-through;
              }
            }
            .discount {
              display: flex;
              margin: 10px 0;
              .count {
                font-size: 12px;
                background-color: #ffe9eb;
                border-radius: 10px;
                text-align: center;
                display: flex;
                .counted {
                  color: white;
                  background-color: red;
                  border-radius: 10px;
                  padding: 1px 5px;
                }
              }
              .left {
                font-size: 12px;
                color: red;
              }
            }
          }
        }
      }
    }
  }
}
</style>
